<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--1、头部-->
<head th:replace="common/front_fragment::head(关于我)"></head>

<!--2、、js引用-->
<div th:replace="common/front_fragment::myJs">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
            th:src="@{/js/semantic.js}"></script>
</div>

<!--3、中间内容、底部footer-->
<body>
<div class="wrap">
    <div class="main">
        <!--3.1：导航栏-->
        <div>
            <nav th:replace="~{common/front_fragment::nav(5)}"></nav>
        </div>

        <!--3.2：中间内容-->
        <div class="m-container-small m-padded-tb-big m-opacity" style="vertical-align: middle">
            <div class="container">
                <div class="ui stackable grid">
                    <div class="ten wide column about_picture">
                        <div class="ui segment" style="background: aliceblue !important;">
                            <img src="https://picsum.photos/id/239/800/600" th:src="@{/images/about_img.png}" alt=""
                                 class="ui rounded image">
                        </div>
                    </div>

                    <div class="six wide column about_text">
                        <div class="ui top header attached segment">关于我</div>

                        <!--自我介绍-->
                        <div class="ui attached m-text segment">
                            <p>一个喜欢CS专业的：倔强青年。</p>
                            <p>虽读的书很少，但尊重爱书之人。</p>
                            <p>今虽腹中少墨，也望他日可教书育人。</p>
                        </div>

                        <!--兴趣爱好-->
                        <div class="ui attached segment">
                            <div class="ui orange basic label">读书</div>
                            <div class="ui blue  basic label">编程</div>
                            <div class="ui teal  basic label">反思</div>
                            <div class="ui brown basic label">写作</div>
                        </div>


                        <div class="ui  bottom attached segment">
                            <a class="ui github black circular icon button" href="https://github.com/2560055298"
                               data-content="点击跳转：GitHub" data-position="bottom center" target="_blank"><i
                                    class="github icon"></i></a>
                            <a class="ui gitee red circular icon button"
                               href="https://gitee.com/sheep-are-flying-in-the-sky" data-content="点击跳转：Gitee"
                               data-position="bottom center" target="_blank"><i class="google icon"></i></a>
                            <a class="ui csdn orange circular icon button" href="https://blog.csdn.net/weixin_44537669"
                               data-content="点击跳转：CSDN" data-position="bottom center" target="_blank"><i
                                    class="copyright outline icon"></i></a>
                            <a class="ui blue circular icon button" id="qq"><i class="qq icon"></i></a>
                            <a class="ui green circular icon button" id="wechat"><i class="weixin icon"></i></a>
                            <a class="ui email teal  circular icon button" data-content="邮箱：laoyangzhijia@aliyun.com"
                               data-position="bottom center"><i class="envelope icon"></i></a>
                        </div>


                        <div class="ui weChatQ flowing popup transition hidden title-front-redius">
                            <div class="ui image">
                                <img src="../../static/images/wechat.png" th:src="@{/images/wechat.jpg}"
                                     style="width:110px" alt="" class="ui centered rounded image">
                                <div style="text-align: center">微信</div>
                            </div>
                        </div>

                        <div class="ui QQ flowing popup transition hidden title-front-redius">
                            <div class="ui image">
                                <img src="../../static/images/qq.png" th:src="@{/images/qq.png}" style="width:110px"
                                     alt="" class="ui centered rounded image">
                                <div style="text-align: center">QQ</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--3.3：底部footer-->
<footer th:replace="common/front_fragment::footer"></footer>
</body>


<!--4、JS代码：
                4-1、手机端：菜单点击按钮（JS）
                4-2、图标跳转按钮 (github、gitee、csdn、wechat、qq、email)
-->
<script>

    //4-1、手机端：菜单点击按钮（JS）
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });


    //4-2、图标跳转按钮 (github、gitee、csdn、wechat、qq、email)
    $('.github')
        .popup();

    $('.gitee')
        .popup();

    $('.csdn')
        .popup();

    $('#wechat').popup({
        popup: $('.weChatQ.popup'),
        position: 'top center'
    });

    $('#qq').popup({
        popup: $('.QQ.popup'),
        position: 'top center'
    });

    $('.email')
        .popup();
</script>
</html>


